<template style="overflow-y: hidden; overflow-x:hidden ">
  <div class="loginWrapper">
    <div class="back-ground" style="overflow-y: hidden; z-index: -1">
      <img src="../assets/image/index-background.png">
    </div>


      <el-card class = card>
        <p class="title">
          铁路异物形态辨别及预警系统
          <span style="display: inline-block; padding-left: 100%"></span>
        </p>
        <el-form :model="loginForm" :rules="loginRule" ref="loginForm" :label-position="labelPosition">
          <el-form-item  prop="userName" class="login-item" style="margin: 0">
            <el-input type="userName" v-model="loginForm.userName" placeholder="账号" @keyup.enter.native="submitForm('loginForm')"></el-input>
          </el-form-item>
          <el-form-item prop="pwd" style="margin-top: 20px;margin-bottom: 0px">
            <el-input v-model="loginForm.pwd" placeholder="密码" type="password" @keyup.enter.native="submitForm('loginForm')"></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button type="primary" @click="submitForm('loginForm')" class="submitBtn" round >登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    <div style="position: absolute; height: 2rem; bottom: 2rem">

    </div>
  </div>
</template>

<script>
import login from '~/components/Login.vue'
import upload from '~/components/base/cliUpload.vue'
import axios from 'axios'
import Cookies from 'js-cookie';
import Pro from '../api/API_PRO'
import API from '../api'
import { getBrowser } from "../components/util";


export default {
  components: {
    login,upload
  },

  data () {
    return {
      loadingLogin: false,
      labelPosition: 'left',
      loginForm: {
        userName: '',
        pwd: ''
      },
      loginRule: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
          //{ min: 3, max: 10, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
          //{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
    }
  },

  mounted() {
      // 如果登录不了，如果是手机，则跳转到手机登录页
      const isPhone = getBrowser() === 'phone';
      if (isPhone){
          this.$router.push({path: `/phone/`})
      }

  },
  beforeUpdate() {
    if (getBrowser() === 'phone'){
      this.$router.push({path: `/phone/`})
    }
  },

  methods: {
    async submitForm (loginForm) {
      this.$router.push({path: `/main/map`})
      // this.$refs[loginForm].validate((valid) => {
      //   if (!valid) {
      //     return
      //   }
      //   this.loadingLogin = true
      // })
      // let result = await this.$store.dispatch('login', {
      //   account: this.loginForm.userName,
      //   password: this.loginForm.pwd
      // })
      // if (result.code) {
      //   if (result.code === 100310) {
      //     this.loadingLogin = false
      //     alert('密码／用户名不能为空')
      //     console.log('密码／用户名不能为空')
      //     return
      //   } else if (result.code === 300101) {
      //     this.loadingLogin = false
      //     alert('密码不正确')
      //     console.log('密码不正确')
      //     return
      //   } else if (result.code === 300100) {
      //     console.log(result)
      //     this.loadingLogin = false
      //     alert('用户名不存在！')
      //     return
      //   } else if(result.code === 300104){
      //     console.log(result)
      //     this.loadingLogin = false
      //     alert('账户无效！')
      //     return
      //   }else {
      //     console.log(result)
      //     return
      //   }
      // }

      // let type = Cookies.get('type');
      //
      // if (type === '0') {
      //   this.$router.push({path: `/main/admin`})
      // } else if (type === '1') {
      //   this.$router.push({path: `/main/user`})
      // }
    },
  }
}
</script>

<style scoped>
  .card{
    width: 40%;
    position: absolute;
    top:35%;
    right: 0;
    left: 0;
    margin: auto;
  }

  .back-ground{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .back-ground>img{
    width: 100%;
    height: 100%;
  }

  .bd{
    width: 20rem;
    margin-left: 60%;
    margin-top: 15%;
    min-height: 15rem;
    background-color: white;
    border-radius: 5px;
  }

  .title{
    text-align: center;
    width: 100%;
    text-align: justify;
    font-weight: bold;
    font-size: 20px;
    height: 2.5rem;
  }
  .title:after{
    display: inline-block;
    width: 100%;
    content: '';
  }

  .submitBtn{
    width: 100%;
    border-radius: 0;
    margin-bottom: 0px;
    background-color: #1965d9;
    border-width: 0;
    transition: 1s;
  }
</style>

